<div
    id="verticalNavLayout"
    class="layout-pf layout-pf-fixed faux-layout"
    style="background-color: white;"
    (window:resize)="onResize($event)"
>
    <pfng-vertical-navigation
        #verticalNav
        [brandAlt]="'Galaxy'"
        [brandSrc]="'/assets/galaxy-logo-02.svg'"
        [contentContainer]="contentContainer"
        [items]="navItems"
        [persistentSecondary]="false"
        [pinnableMenus]="true"
        [showBadges]="true"
        [showIcons]="true"
        [updateActiveItemsOnClick]="true"
        (onItemClickEvent)="onItemClicked($event)"
    >
        <app-notification-drawer #notificationList
            *ngIf='authenticated'
            (emitUnread)='setUnreadindicator($event)'
        ></app-notification-drawer>

        <div>
            <div *ngIf="isLoading" class="header-spinner">
                <div class="inner-spinner">
                    <div class="spinner spinner-inverse spinner-sm"></div>
                </div>
            </div>
            <ul class="nav navbar-nav navbar-right navbar-iconic">
                <li>
                    <a appLogEvent="About" href="" [routerLink]="" (click)="about(aboutTemplate)" class="nav-item-iconic nav-link">
                        <span class="fa pficon-info"></span> About
                    </a>
                </li>
                <li>
                    <a appLogEvent="Help" href="https://github.com/ansible/galaxy/issues" target="_blank" class="nav-item-iconic nav-link">
                        <span class="fa pficon-help"></span> Help
                    </a>
                </li>
                <li>
                    <a appLogEvent="Documentation" href="/docs/" target="_blank" class="nav-item-iconic nav-link">
                        <span class="fa pficon-catalog"></span> Documentation
                    </a>
                </li>
                <li>
                    <a *ngIf="authenticated" appLogEvent="Notifications" (click)="toggleNotifcations()" class="nav-item-iconic nav-link">
                        <span class="fa fa-bell"></span>
                        <span *ngIf="unseenNotifications" class="notification-dot"></span>
                    </a>
                </li>
                <li class="navbar-iconic">
                    <a appLogEvent="Login" class="nav-item-iconic nav-link" [routerLink]="['/login']" [queryParams]="{error: false, next: router.url}" *ngIf="!authenticated"><span
                            class="fa fa-sign-in"></span> &nbsp;Login</a>
                </li>
                <li class="dropdown" dropdown *ngIf="authenticated">
                    <a class="dropdown-toggle nav-item-iconic nav-link" id="dropdownMenu2" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true" dropdownToggle>
                        <span class="fa fa-user"></span> {{ username }} <span class="caret"></span>
                    </a>
                    <ul *dropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
                        <li><a appLogEvent routerLink="/me/preferences">Preferences</a></li>
                        <li><a [routerLink]="" (click)="logout()">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </pfng-vertical-navigation>
    <div #contentContainer id="app-container" class="app-container container-fluid container-pf-nav-pf-vertical">
        <router-outlet (activate)='routerActivate($event)'></router-outlet>
        <user-notifications></user-notifications>
    </div>
</div>
<ng-template #aboutTemplate>
    <pfng-about-modal [config]="aboutConfig" (onCancel)="closeAbout($event)">
        <div>
            Ansible Galaxy is Ansible’s official hub for sharing Ansible content.
        </div>
        <br />
        <div>
            <span style="font-weight: bold"><span class="fa fa-lg fa-github"></span> Galaxy Source:</span>
            <a appLogEvent href="https://github.com/ansible/galaxy" target="blank">github.com/ansible/galaxy</a>
        </div>
        <div>
            <span style="font-weight: bold"><span class="fa fa-lg fa-github"></span> Galaxy Team:</span>
            <span *ngFor="let profile of teamMembers; let last=last">
                <a appLogEvent href="https://github.com/{{profile}}" target="blank">{{ profile }}</a>{{last ? '' : ', '}}
            </span>
        </div>

    </pfng-about-modal>
</ng-template>
